<!--
 * @Author: your name
 * @Date: 2021-12-15 20:50:47
 * @LastEditTime: 2021-12-16 13:09:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \day7\my-app\src\views\Detail.vue
-->
/<template>
  <div>
      <Header name="详情"></Header>
      <dl>
        <dt><img :src="obj.img" alt="" /></dt>
        <dd>
          <p>{{ obj.name }}</p>
          <p>{{ obj.title }}</p>
          <div class="dd_con">
            <span style="color:red">{{ obj.price }}</span>
            <p>
              <button v-if="obj.count>0">-</button>
              <span v-if="obj.count>0">{{ obj.count }}</span>
              <button>+</button>
            </p>
          </div>
        </dd>
      </dl>
  </div>
</template>

<script>
import {mapState,mapActions} from "vuex"

import Header from "../components/Header.vue"

export default {
    data () {
        return {
            id:null,
            obj:localStorage.getItem("data")?JSON.parse(localStorage.getItem("data")):{}
        }
    },
    mounted () {
        this.getList()
        this.id=this.$route.query.id
        this.list.forEach((item) => {
            item.child.forEach((v)=>{
                if(v.id==this.id){
                    localStorage.setItem("data",JSON.stringify(v))
                    this.obj=v
                }
            })
        })
    },
    methods: {
        ...mapActions(["getList"])
    },
    computed: {
        ...mapState(["list"])
    },
    components: {
        Header
    }
}
</script>

<style lang="scss" scoped>

</style>